<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<head>
    <meta charset="UTF-8">
    <title>VIDEO-LIST</title>

    <style>
        body {
            text-align: center;
        }

        table {
            margin: 20px auto;
            height: 400px;
            overflow: scroll;
        }

        td {
            min-width: 200px;
            max-width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .list {
            position: fixed;
            top: 0;
            left: 0;
            z-index: -1;
        }

        .content {
            float: right;
            text-align: center;
            margin: 100px;
            background-color: rgba(0, 0, 0, .9);
        }

        .content img {
            margin: auto;
            max-height: 500px;
        }

        .option {
            padding: 30px;
        }

        .option a {
            color: white;
            margin-left: 20px;
        }
    </style>
</head>
<body>

<div class="list">
    <h1>VIDEO-LIST</h1>
    <a href="/alternative/1">ALTERNATIVE</a>
    <br>
    <button th:if="${start}" onclick="javascript:stopClick()">停止</button>
    <button th:if="!${start}" onclick="javascript:startClick()">开始</button>
    <table>
        <thead>
        <tr>
            <th>ID</th>
            <th>NAME</th>
            <th>STATE</th>
            <th>TIME</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="video:${list}">
            <th th:text="${video.id}"></th>
            <td><a th:onclick="'javascript:videoClick(\''+ ${video.id} +'\',\''+ ${video.url} +'\')'"
                   href="javascript:void(0)"
                   th:text="${video.name}"></a></td>
            <td th:text="${video.videoTime}"></td>
            <td th:text="${video.stateMsg}"></td>
        </tr>
        </tbody>
    </table>

    <br>

    <div class="page-info">
        <span th:text="'SIZE:'+${size}"></span>
        <span th:text="'TOTAL:'+${total}"></span>
        <br>
        <a th:href="'/list/'+${current - 1}">LAST</a>
        <a th:href="'/list/'+${current + 1}">NEXT</a>
    </div>
</div>

<div class="content">
    <div class="option">
        <a class="close" href="javascript:void(0)">CLOSE</a>
        <a class="like">LIKE</a>
        <a class="delete">DELETE</a>
        <a target="_blank" class="open">OPEN</a>
    </div>

    <div id="img-list">
    </div>

    <div class="option">
        <a class="close" href="javascript:void(0)">CLOSE</a>
        <a class="like">LIKE</a>
        <a class="delete">DELETE</a>
        <a target="_blank" class="open">OPEN</a>
    </div>

</div>


<script src="/js/jquery.min.js"></script>
<script>
    function videoClick(id, url) {

        var current = [[${current}]];
        var http = '[[${http}]]';

        $('.like').attr('href', '/video/like/' + id + '?from=list&current=' + current);
        $('.delete').attr('href', '/video/delete/' + id + '?from=list&current=' + current);
        $('.open').attr('href', http + '/' + url);

        $.get('/img/' + id, function (list) {
            var html = '';
            list.forEach(function (img) {
                html += `<img src="http://192.168.1.100/${img.path}"></img>`;
            });
            $('#img-list').html(html);
        })
    }

    function stopClick() {
        $.post('/crawler/stop', function (t) {
            window.location.reload();
        })
    }

    function startClick() {
        $.post('/crawler/start', function (t) {
            window.location.reload();
        })
    }

    $('.close').on('click', function (t) {
        $('#img-list').html('');
    });

    $(document).keydown(function (event) {
        if (event.keyCode === 27) {
            $('#img-list').html('');
        }
    });
</script>
</body>
</html>